<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: landeqing
  Date: 2017/12/25
  Time: 15:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><html>
<head>
    <title>添加收货地址</title>
    <script type="text/javascript">
        //        $(function() {
        //            // setCity("top", "0");//页面加载时就现实数据库第一个数据，一定要加上
        //            setCity("top", "0");
        //            $("#top").change(function() {
        //                // 当省级改变的时候，让市级和县级文本清空
        //                $("#center option").remove();
        //                $("#button option").remove();
        //                //获得省级的id
        //                var pid=$("#top option:selected").attr("id");
        //                //加载该省级的市级数据
        //                setCity("center", pid);
        //            });
        //            $("#center").change(function() {
        //                //当市级改变的时候，让县级文本清空
        //                $("#button option").remove();
        //                //获取城市的pid
        //                var pid=$("#center option:selected").attr("id");
        //                //加载该省市级的县级数据
        //                setCity("button",pid );
        //            });
        //        });
        //        //selectid:select标签的id，pid数据库省级县级的pid
        //        function setCity(selectid, pid) {
        //            $.ajax({
        //                url : "/code_20150406(Ajax_XStream_Json)/city/cityList?pid="+pid,
        //                type : "get",
        //                cache : false,
        //                success : function(res) {
        //                    //注意!!!这里必须使用eval(res)函数，否则获取到的json数据无法遍历,无话获取到数据
        //                    var arr = eval(res);
        //                    //遍历返回的json数据加载到select标签;
        //                    $.each(arr, function(key, val) {
        //                        $("#" + selectid).append(
        //                            " <option id='" + val.tb_AreaId + "'>"
        //                            + val.areaName + "</option>");
        //                    });
        //                }
        //            });
        //        };
        //市的ajax
        function cityList() {
            var p_id=$("#top").val();
            $("#center option").remove();
            $.ajax({
                url : "/orderAddress/city?pid="+p_id,
                type : "get",
                cache : false,
                success : function(res) {
                    //注意!!!这里必须使用eval(res)函数，否则获取到的json数据无法遍历,无话获取到数据
                    var city = eval(res);
                    // alert(arr);
                    //遍历返回的json数据加载到select标签;
                    /*  $.each(arr, function(key, val) {
                         $("#" + center).append(
                              " <option id='" + val.id + "'>"
                              + val.c_name + "</option>");
                    });*/
                    var ctId='${city.id}';
                   // alert(ctId);
                    for(var i=0,l=city.length;i<l;i++){
                        var option=document.createElement("option");
                        $(option).val(city[i].id);
                        //alert(city[i].id==ctId);
                        if(city[i].id==ctId) {
                            $(option).attr("selected",true);
                        }
                        $(option).text(city[i].c_name);
                        $('#center').append(option);
                    }
                    xianList();
                }
            });

        }
        //县的ajax
        function xianList() {
            var c_id=$("#center").val();
            // alert(c_id);
            $("#button option").remove();
            // alert(c_id);
            $.ajax({
                url : "/orderAddress/xian?cid="+c_id,
                type : "get",
                cache : false,
                success : function(res) {
                    //注意!!!这里必须使用eval(res)函数，否则获取到的json数据无法遍历,无话获取到数据
                    var xian = eval(res);
                    //遍历返回的json数据加载到select标签;
//                        $.each(xian, function(key, val) {
//                            alert(key,val);
//                            $("#" + button).append(
//                                " <option id='" + val.id + "'>"
//                                + val.x_name + "</option>");
//                        });
                    var xianId='${xian.id}';
                    for(var i=0,l=xian.length;i<l;i++){
                        var option=document.createElement("option");
                        $(option).val(xian[i].id);
                        if(xian[i].id==xianId) {
                            $(option).attr("selected",true);
                        }
                        $(option).text(xian[i].x_name);
                        $('#button').append(option);
                    }

                }
            });

        }
        $(function(){
            cityList();
        });

    </script>
</head>
<body>
<form action="/orderAddress/update" method="post">
    <tr>
        <td><input name="id" type="hidden" value="${address.id}"/></td>
        <td>收货人：<input name="userName" type="text" value="${address.userName}"/></td><br/>
        <td>手机号码：<input name="phone" type="text" value="${address.phone}"/></td><br/>
        <td>所在地区：
            <select name="district" id="top" onchange="cityList()">
                <c:forEach var="obj" items="${pList}">
                    <option value="${obj.id}"
                            <c:if test="${obj.id==province.id}"> selected="selected"</c:if>
                    >${obj.p_name}</option>
                </c:forEach>
                <option value="${province.id}">${province.p_name}</option>
            </select>&nbsp;&nbsp;
            <select name="district" id="center" onchange="xianList()">
                <option selected="selected">请选择城市</option>
            </select>&nbsp;&nbsp;
            <select name="district" id="button">
                <option selected="selected">请选择县/区</option>
            </select>
        </td><br/>
        <td>详细地址：<input name="address" type="text" value="${address.address}"/></td><br/>
        <td>
            <input type="submit" value="提交"/>
        </td>
    </tr>

</form>

</body>
</html>
